<template>
  <div class="home">
    <a-row :gutter="16">
      <a-col :span="4" v-for="(item, index) in numList" :key="item.id">
        <div
          class="home-block z-flex-column-center"
          :class="'home-block-' + index"
        >
          <p class="z-font-18">{{ item.title }}</p>
          <p class="z-font-30 z-line-1">{{ item.num }}</p>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="15">
        <a-card title="常用功能导航">
          <template #extra>...</template>

          <a-row :gutter="16">
            <a-col :span="4" v-for="item in oftenList" :key="item.id">
              <a-card hoverable style="width: 120px" class="textalign">
                <Icon class="aicon" :type="item.icon" />
                <a-card-meta :title="item.title"> </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card title="今日待办">
          <template #extra>...</template>
          <a-collapse>
            <a-collapse-panel
              v-for="(item, index) in todayList"
              :key="index"
              :header="item.time + ' ' + item.title"
            >
              <p>{{ item.date }}</p>
              <p>{{ item.address }}</p>
              <template #extra><setting-outlined /></template>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16" class="bottom20">
      <a-col>
        <Bar :title="barTitle"></Bar>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Bar from "@/components/chart/Bar";

import Icon from "ant-design-vue/es/icon";
export default {
  name: "thisHome",
  components: { Icon, Bar },
  data() {
    return {
      numList: [
        { id: 0, title: "地府人数", num: 409378862 },
        { id: 1, title: "今日入境", num: 3591 },
        { id: 2, title: "今日出境", num: 4836 },
        { id: 3, title: "孤魂野鬼", num: 12345 },
        { id: 4, title: "管理人员", num: 2938 },
        { id: 5, title: "冥币资产", num: "97352403万亿" },
      ],
      oftenList: [
        { id: 0, title: "生死簿", icon: "read" },
        { id: 1, title: "查询寿命", icon: "search" },
        { id: 2, title: "入境管理", icon: "download" },
        { id: 3, title: "重新投胎", icon: "interaction" },
        { id: 4, title: "货币管理", icon: "key" },
        { id: 5, title: "操作日志", icon: "switcher" },
        { id: 6, title: "十八层地狱", icon: "bank" },
        { id: 7, title: "发勾魂单", icon: "schedule" },
        { id: 8, title: "资产管理", icon: "transaction" },
        { id: 9, title: "员工管理", icon: "user" },
        { id: 10, title: "营销管理", icon: "fund" },
        { id: 11, title: "百鬼夜行", icon: "cloud" },
      ],
      todayList: [
        {
          id: 0,
          title: "鬼魂审判",
          date: "9901年2月9日",
          time: "AM 09:00",
          address: "阎王殿",
          person: ["", "", ""],
        },
        {
          id: 1,
          title: "孟婆汤改善报告",
          date: "9901年2月10日",
          time: "PM 15:00",
          address: "会议室1-1",
          person: ["", ""],
        },
        {
          id: 2,
          title: "职工聚餐",
          date: "9901年2月11日",
          time: "PM 23:30",
          address: "乱葬岗",
          person: ["", "", "", ""],
        },
        {
          id: 3,
          title: "判官高级培训",
          date: "9901年2月12日",
          time: "AM 10:00",
          address: "会议室3-1",
          person: [""],
        },
      ],
      todayActive: -1,
      TimelineChartData: [],
      barTitle: "地狱每层人数",
    };
  },
  methods: {
    myEchartBroken() {
      this.TimelineChartData.x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      this.TimelineChartData.y1 = [
        10, 50, 30, 100, 150, 300, 70, 30, 90, 100, 110, 120,
      ];
      this.TimelineChartData.x = [
        100, 130, 50, 150, 160, 70, 100, 90, 350, 110, 120, 300,
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.textalign {
  text-align: center;
  margin-bottom: 10px;
}
.bottom20 {
  margin-bottom: 20px;
}
.aicon {
  font-size: 26px;
}
.ant-row {
  margin-bottom: 15px;
}
.ant-card-meta {
  margin-top: 10px;
  text-align: center;
}
.home-block {
  height: 150px;
  color: #fff;
  line-height: 40px;
  &.home-block-0 {
    background-color: rgb(60, 219, 134);
  }
  &.home-block-1 {
    background-color: rgb(246, 105, 50);
  }
  &.home-block-2 {
    background-color: rgb(68, 128, 244);
  }
  &.home-block-3 {
    background-color: rgb(252, 132, 82);
  }
  &.home-block-4 {
    background-color: rgb(234, 124, 204);
  }
  &.home-block-5 {
    background-color: rgb(8, 48, 69);
  }
}
.home-often {
  height: 310px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  .home-often-item {
    width: 16.66666%;
    margin: 16px 0;
  }
  .home-often-item-icon {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
}
.home-today {
  height: 310px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  .el-collapse {
    border-top: 0;
  }
  :deep(.el-collapse-item__header) {
    padding: 0 10px;
    border-bottom: 0;
  }
  :deep(.el-collapse-item__header.is-active) {
    background-color: #409eff;
    color: #fff;
  }
  :deep(.el-collapse-item__content) {
    padding: 10px 10px 20px;
  }
}
.home-broken {
  height: 330px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.home-cake {
  height: 330px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.z-font-18 {
  font-size: 18px;
}
.z-font-30 {
  font-size: 30px;
}
.z-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.z666666 {
  color: #666666;
}
.z-t-bold {
  font-weight: bold;
}
</style>
